<template>
    <div class="flowcontainer">
        <div class="crumb">
            <span>当前位置：</span>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>出版流程</el-breadcrumb-item>

            </el-breadcrumb>
        </div>
        <div>
            <div class="left">
                <div class="top">
                    <div class="titlebox">
                        <p>出版类型</p>
                    </div>
                    <div class="contentbox">
                        <div>
                            <img src="@/assets/flow/wenxue.png" alt="/">
                            <span>文学创作</span>
                        </div>
                        <div>
                            <img src="@/assets/flow/jiaocai.png" alt="/">
                            <span>教材教辅</span>
                        </div>
                        <div>
                            <img src="@/assets/flow/xueshu.png" alt="/">
                            <span>学术专著</span>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="titlebox">
                        <p>联系方式</p>
                    </div>
                    <div class="qrcode">
                        <div>
                            <img :src="codeImage" alt="" />
                            <!-- <img src="@/assets/flow/qr.png" alt=""> -->
                        </div>
                        <span>微信扫描二维码联系客服</span>
                    </div>
                    <div class="contact">
                        <p>联系电话</p>
                        <span>{{ name }} {{ phone }}</span>
                    </div>
                </div>
            </div>
            <div class="right" style="margin-bottom:30px;">
                <div class="topflowbox">
                    <div class="flowtitle">
                        <p>出版流程</p>
                    </div>
                    <div class="flowimg">
                        <img :src="imgUrl" alt="">
                    </div>
                </div>
                <div class="flowdesc">
                    <div v-for="(item, index) in stepDetailArr" :key="index">
                        <div class="steptitle">
                            {{ item.title }}
                        </div>
                        <div class="stepdetail">{{ item.content }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: localStorage.getItem('name'),
            phone: localStorage.getItem('phone'),
            imgUrl: '',
            stepDetailArr: [
                {
                    title: '选题申请：',
                    content: '凡是非需要特审的选题，利用自身的出版通道，为客户快速通过选题审批，为客户出版节约时间成本。'
                },
                {
                    title: '编辑校对：',
                    content: '有专业的编辑校对人员，为作者提供优质服务。客户可以给我们提供相应资料，我们的编辑人员会在最短时间内编辑整理成书稿。客户提供的书稿，我们的校对人员会做认真的校对修改，以确保能顺利通过出版社的校对质检（标准要求万分之一错误率）。另外，对外单独接文理科及纯英文书稿校对。'
                },
                {
                    title: '申请书号：',
                    content: '准备完整的出版资料，以最短的时间内为客户拿到出版号（中国图书数据核字号：CIP）。对于部分着急出版的客户，我们还可以安排走书号加急申请通道。刊易代理申请的书号均为正规书号，均可从新闻出版总署官网查询核实。没有特殊说明，刊易全部安排的是单书号。对于不合规的丛书号，我们不会安排。（丛书号是一套书的书号，定价只能整套定价，不可以单独销售，所以对于部分机构将不同作者不同类型作品用一套书的名义，走丛书号方式出版，实际属于不合规行为）'
                },
                {
                    title: '排版设计：',
                    content: '刊易有专业的排版设计人员。我们认真对待每一本书。排版主要软件使用ID软件。刊易有专业美工负责图书封面设计，不少案例在网站公开展示。广大作者可以认真对比，我们跟其他单位出版的图书封面，相信你能看到我们的认真。'
                },
                {
                    title: '印刷出版：',
                    content: '刊易提供多种印刷服务。包括批量印刷（500本以上），也包括快印（1本起印）。作者出版目的不同，印刷量也不同。对于做纪念或评职称用书，通常印量都很少。刊易就可以安排单本起印的快印。作者按需定量。如果需要大量印刷，我们可以安排批量印刷。批量印刷通常是500册起印。单本均价便宜，但总成本较高。'
                },
            ],

            corder: '',
            corderField: '',
            cpage: 1,
            climit: 20,
            companyInfo: [],
            codeImage: "",
        }
    },
    methods: {
        getCompanyInfo() {
            this.$http.get(`/bookManagement/company/page?order=${this.corder}&orderField=${this.corderField}&page=${this.cpage}&limit=${this.climit}`).then((res) => {
                // console.log(res.data.data.list);
                this.companyInfo = res.data.data.list;
                this.codeImage = this.companyInfo[0].image;
            }).catch(() => { })
        },
        getPressFlow() {
            this.$http.get('/bookManagement/publishflow/page?order=&orderField=&page=1&limit=20').then(res => {
                // console.log(res);
                this.stepDetailArr = res.data.data.list;
                this.imgUrl = res.data.data.list[0].image;
            }).catch();
        }
    },
    mounted() {
        this.getCompanyInfo();
        this.getPressFlow();
    },

}
</script>

<style scoped>
.flowcontainer {
    width: 100%;
    height: 100%;
    /* min-height: 1130px; */
    background: rgb(239, 242, 243);
}

.crumb {
    height: 50px;
    margin: 0 240px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.crumb span {
    color: rgb(3, 3, 3);
    font-family: PingFang SC;
    font-size: 18px;
    letter-spacing: 0px;


}

.flowcontainer>div:nth-child(2) {
    height: 100%;
    /* min-height: 1130px; */
    display: flex;
    flex-direction: row;
    margin: 0 240px;

}

.left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.left p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 22px;
    line-height: 22px;
    letter-spacing: 0px;
    text-align: left;
    margin: 0;
    padding: 0;
}

.left .top {
    height: 300px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.left .top>div:first-child {
    flex: 1;
}

.titlebox {
    display: flex;
    justify-content: center;
    align-items: center;
}

.left .top>div:last-child {
    flex: 2;
    border-top: 2px solid rgb(239, 242, 243);
    ;
}

.top .contentbox {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.top .contentbox img {
    height: 80px;
    width: 80px;
}

.top .contentbox span {
    display: block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 20px;
    font-weight: undefined;
    line-height: 30px;
    letter-spacing: 0px;
}

.left .bottom {
    height: 700px;
    background-color: white;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
}

.bottom>div:first-child {
    flex: 1;
}

.bottom>div:last-child {
    flex: 2;
}

.qrcode {
    flex: 6;
    border-top: 2px solid rgb(239, 242, 243);
    border-bottom: 2px solid rgb(239, 242, 243);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.qrcode>div {
    background-color: rgb(239, 242, 243);
    margin: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.qrcode img {
    width: 300px;
    height: 300px;
}

.qrcode span {
    display: inline-block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 20px;

    line-height: 30px;
    letter-spacing: 0px;
    text-align: center;
}

.contact {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.contact p {
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
    text-align: left;
}

.contact span {
    display: inline-block;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 25px;
    line-height: 37px;
    letter-spacing: 0px;
    text-align: left;
}

.right {
    flex: 3;
    margin-left: 20px;
    background-color: white;
    display: flex;
    flex-direction: column;
}

.right>div {
    flex: 1;
}

.topflowbox {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgb(239, 242, 243);

}

.flowtitle {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flowtitle p {
    color: rgb(6, 63, 90);
    font-family: PingFang SC;
    font-size: 30px;
    line-height: 44px;
    letter-spacing: 0px;
    text-align: center;
}

.flowimg {
    flex: 2;
    /* background: url('@/assets/flow/flow.png'); */
    /*   background-position: center;
    background-size: contain;
    background-repeat: no-repeat; */
    margin: 0 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.flowimg img {
    /* padding: 0 20px; */
    width: 950px;
    height: 300px;
}

.flowdesc {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 40px;
    color: rgb(0, 27, 39);
    font-family: PingFang SC;
    font-size: 16px;
    /* line-height: 24px; */
    letter-spacing: 0px;
    text-align: justify;
}

.flowdesc>div {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 20px;
}

.flowdesc>div:last-child {
    margin-bottom: 30px;
}

.steptitle {
    /* white-space:nowrap; */
    font-size: 20px;
    /* line-height: 25px; */
    /* width: 100px; */
    font-weight: bold;
}

.stepdetail {
    font-size: 20px;
    /* line-height: 25px; */
    flex: 1;
    /* padding-left: 10px; */
    text-indent: 2em;
    padding-top: 10px;
}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
</style>